<template>
  <div class="jyd-banner">
    <p>预计年化收益率</p>
       <div class="center">
      <span v-text="initData.leftRateInit.substr(0,initData.leftRateInit.length-1)"></span>%<span v-text="!!initData.rightRateInit?`+${initData.rightRateInit.substr(0,initData.rightRateInit.length-1)}`:initData.rightRateInit"></span><span v-text="initData.rightRateInit.substr(initData.rightRateInit.length-1,1)"></span>
     </div>
      <div class="bottom">
          <p v-text="`${initData.per_money_min}元起投`" v-if="showList[0]"></p>
          <p v-if="sign=='into'" v-text="initData.project_period"></p>
          <p v-text="`锁定期${initData.project_period}月`" v-if="showList[1]&&sign!='into'"></p>
          <p v-text="`剩余可投${initData.dropTankMoney}元`" v-if="showList[2]"></p>
      </div>
  </div>
</template>
<script>
export default {
  name: "Banner",
  props: {
    initData: {
      type: Object,
      default() {
        return {};
      }
    },
    sign: {
      type: String,
      default: ""
    },

    showList: {
      type: Array,
      default() {
        return [1, 1, 1];
      }
    }
  }
};
</script>
<style lang="scss">
.jyd-banner {
  height: 374px;
  width: 100%;
  background: url("./images/banner_top_bg.jpg") no-repeat;
  background-size: 100% 100%;
  margin-top: 80px;
  box-sizing: border-box;
  overflow: hidden;
  padding-top: 40px;
  > p {
    text-align: center;
    font-size: 24px;
    color: #a8caed;
  }
  .center {
    text-align: center;
    padding-top: 50px;
    font-size: 32px;
    color: #fff;
    span {
      &:first-child {
        font-size: 85px;
      }
      &:nth-child(2) {
        font-size: 65px;
      }
    }
  }
  .bottom {
    display: flex;
    justify-content: space-around;
    margin-bottom: 66px;
    padding-top: 66px;
    > p {
      flex: 0 0 auto;
      padding: 8px 20px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 25px;
      color: #6693c0;
      font-size: 26px;
    }
  }
}
</style>


